import './App.css';
// import PureComponentDemo from './components/PureComponentDemo';
// import MyMemo from './components/memo/MyMemo'
import { useState, useCallback } from 'react'
import MyUseMemo from './components/usememo/MyUseMemo';

import MyUseCallback from './components/usecallback/MyUseCallback';
function App() {
  const [a, setA] = useState(1);
  const [list, setlist] = useState([1, 2, 3, 4, 5]);
  let [age, setAge] = useState(18)
  let [uname, setUname] = useState('曹翔博')

  // 如果依赖项改变了，就重新返回一个新函数。如果依赖项没有改变。getInfo引用的是useCallback（）缓存的函数。
  const getInfo = useCallback((text) => {
    console.log(text)
  }, [uname])
  return (
    <div className="App">
      {/* <PureComponentDemo /> */}

      {/*  <MyMemo a={a} {...list} />
      <button type='button' onClick={
        () => {
          //改变了list状态的值，但是<MyMemo>组件的props没有改变，所有使用了React.memo( MyMemo )，就不会重新渲染；没有使用的，就会重新渲染。
          setlist([1, 2, 3, 4, 5])
          // setA(a + 1)
        }
      }>修改MyMemo组件的props </button> */}


      <MyUseMemo age={age} name={uname} >
        <h1>使用useMemo()hooks的案例：</h1>
      </MyUseMemo>

      <button type='button' onClick={
        () => {
          setAge(age + 1)
        }
      }>修改age</button>
      <button type='button' onClick={
        () => {
          setUname('张3封')
        }}>修改name</button>


      <MyUseCallback getInfo={getInfo}></MyUseCallback>
    </div>
  );
}

export default App;
